<template>
    <div class="demand-detail">


        <div class="content">
            <!-- 需求内容 -->
            <div class="demand-info">
                <div class="title">
                    {{ dataObj.name ? dataObj.name : cateName.two_cate_name }}
                    <!-- <div class="status0" v-if="dataObj.status === 0">
                        可参与
                    </div>
                    <div class="status1" v-if="dataObj.status === 1">
                        已中标
                    </div>
                    <div class="status1" v-if="dataObj.status === 2">
                        已取消
                    </div> -->
                </div>
                <div v-if="dataObj.createtime" class="grid">
                    <div class="descriptions">
                        发布时间：
                        <span>{{ getTime2(dataObj.createtime * 1000) }}</span>
                    </div>
                    <div class="descriptions">
                        服务地址：
                        <span>{{ dataObj.city_name }}</span>
                    </div>

                    <div class="descriptions">
                        服务类型：
                        <span>{{ cateName.one_cate_name }}·{{
                            cateName.two_cate_name
                            }}</span>
                    </div>
                    <div class="descriptions">
                        截止时间：
                        <span style="color: #fa5151">{{ getTime2(dataObj.end_time * 1000) }}</span>
                        <span v-if="dataObj.status === 1 || dataObj.status === 2" style="color: #fa5151">招标已结束</span>
                    </div>
                </div>

                <div class="describe-title">需求详情：</div>
                <div class="describe">
                    {{ dataObj.describe }}
                </div>
                <div v-if="demandImg.length > 0" class="demand-img">
                    <el-image v-for="url in demandImg" :key="url" :src="url" fit="scale-down"
                        :preview-src-list="demandImg" class="img">
                    </el-image>
                </div>
                <img v-if="userInfo && user_tel == '' && userInfo.id != dataObj.user_id"
                    src="~/assets/images/service/demanddetail_phone.png" class="no_look_phone" alt="">
                <div v-if="user_tel" class="look_phone">
                    <i class="el-icon-phone"></i>
                    联系电话：{{ user_tel }}
                </div>
                <div v-if="userInfo && user_tel == '' && userInfo.id != dataObj.user_id"
                    style="text-align: center; padding: 50px 0 0">
                    <!-- <el-button type="primary" style="width: 215px; height: 54px" @click="changeApply">
                        解锁查看
                    </el-button> -->
                    <!-- <el-button v-if="isParticipateIn" type="warning" style="width: 215px; height: 54px" plain
                        @click="openKefu(dataObj)">去联系</el-button> -->
                </div>
                <div class="tips">
                    以上信息由用户提供并负责真实、准确、合法性，请谨慎甄别，如发现违法/侵权信息，请与我们联系。
                </div>
                <div class="moeny">
                    <!--                        <div>悬赏</div>-->
                    <span style="font-family: Arial">￥{{ dataObj.money }}</span>
                </div>
                <!-- <div class="collect" @click="setCollection">
                    <img :src="isCollect ? collectionS : collection" alt="" />
                    <span>收藏</span>
                </div> -->

            </div>
            <!-- 需求内容 end -->

            <!-- 投标 -->
            <div v-if="userInfo && dataObj && userInfo.id != dataObj.user_id"
                v-show="(isUpdataJoin && isEditShow) || !isUpdataJoin" class="application">
                <div class="input_moent">
                    我的报价
                    <el-input-number v-model="num" :controls="false" :min="0"></el-input-number>
                    <span>（元）</span>
                </div>
                <div class="textarea">
                    <div class="label">投标说明</div>
                    <el-input v-model="illustrate" type="textarea" maxlength="1500" rows="5" placeholder="请输入投标说明">
                    </el-input>
                </div>
                <!-- <div class="upload-images">
                        <el-upload :action="imgUploadUrl" list-type="picture-card" :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                            :on-exceed="handleExceed" :headers="header" :limit="3" accept=".jpg,.jpeg,.png">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div class="upload-images-text">
                            仅支持png，jpg，jpeg格式，大小5M内
                        </div>
                        <div class="upload-images-text">
                            图片上传数量不超过3张
                        </div>
                    </div> -->
                <div class="submit">
                    <div class="tips2">注 ：平台结算后需扣除 <span>2%</span>订单金额为平台的服务费用</div>
                    <el-button v-if="!isUpdataJoin" style="width: 144px; height: 44px" type="primary" @click="addPart"
                        :loading="partLoading">确认提交</el-button>
                    <el-button v-else style="width: 144px; height: 44px" type="primary" @click="editDemand"
                        :loading="partLoading">确认编辑</el-button>
                    <!-- <el-button style="width: 99px; height: 44px" type="info"
                            @click="applicationShow = false">关闭</el-button> -->
                </div>
            </div>
            <!-- 投标 end -->

            <div v-if="dataObj.createtime && userInfo" class="status_img">
                <img v-if="joinList.length == 0 && dataObj.status == 0"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/demanddetail_status_1.png" alt="">
                <img v-else-if="isUpdataJoin && dataObj.status == 0"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/demanddetail_status_2.png" alt="">
                <img v-else-if="dataObj.status == 1 || dataObj.status == 2"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/demanddetail_status_3.png" alt="">
                <img v-else-if="dataObj.status == 0 && joinList.length > 0 && dataObj.user_id == userInfo.id"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/demanddetail_status_4.png" alt="">
                <img v-else-if="isWin"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/demanddetail_status_4.png" alt="">
            </div>



            <!-- 参与投标列表 -->
            <div class="cytb">
                投标服务商（<span>{{ joinList.length }}</span>）
            </div>

            <div v-if="joinList.length > 0" class="cytb-list">
                <div class="cytb-item" v-for="(item, index) in joinList" :key="index">
                    <img v-if="item.is_success == 1" class="winTheBidding"
                        src="~/assets/images/service/winTheBidding.png?v=1" alt="" />
                    <!-- <img v-else-if="item.hire_status == 1" class="winTheBidding"
                        src="~/assets/images/service/winTheBidding2.png" alt="" /> -->
                    <div v-if="item.serviceinfo != null" class="cytb-service-info">
                        <img :src="item.serviceinfo.logo" alt="" style="object-fit: cover" />
                        <div class="name">
                            {{ item.serviceinfo.name }}
                            <!-- <i class="el-icon-phone" @click="openKefu(item)"></i> -->
                            <div class="tags">
                                <div v-if="item.serviceinfo.type == 1" class="tag" style="background-color: #1B8DFF">
                                    企业服务商
                                </div>
                                <div v-if="item.serviceinfo.type == 2" class="tag" style="background-color: #1B8DFF">
                                    企业服务商
                                </div>
                                <div v-if="item.serviceinfo.type == 3" class="tag" style="background-color: #1B8DFF">
                                    企业服务商
                                </div>
                                <div v-if="item.serviceinfo.type == 4" class="tag" style="background-color: #1B8DFF">
                                    企业服务商
                                </div>
                                <div v-if="item.serviceinfo.type == 5" class="tag" style="background-color: #1B8DFF">
                                    企业服务商
                                </div>
                                <div v-if="item.serviceinfo.type == 6" class="tag" style="background-color: #1B8DFF">
                                    个人服务商
                                </div>
                                <div v-if="item.serviceinfo.cash_deposit != '0'" class="tag"
                                    style="background-color: #FF6900">
                                    保证金{{
                                        item.serviceinfo.cash_deposit
                                    }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cytb-item-text">
                        <p>投标金额：<span>{{ item.price }}元</span></p>
                        <p>投标说明：<span>{{ item.illustrate }}</span></p>
                        <p style="font-size: 14px;">投标时间：<span>{{ changeDate(item.createtime) }}</span></p>
                    </div>
                    <!-- <div v-if="item.pic[0] !== ''" class="cytb-item-images">
                        <el-image v-for="url in item.pic" :key="url" :src="url" fit="scale-down"
                            :preview-src-list="item.pic" class="img">
                        </el-image>
                    </div> -->
                    <!-- <div class="time">
                        提交于 {{ changeDate(item.createtime) }}
                    </div> -->
                    <div class="button-group" v-if="dataObj && userInfo && userInfo.id == dataObj.user_id"
                        style="right: 137px;">
                        <el-button class="button" type="primary" style="width: auto;" plain
                            @click="openKefu(item)">联系服务商</el-button>
                    </div>
                    <div class="button-group">
                        <el-button v-if="
                            dataObj &&
                            userInfo &&
                            userInfo.id == dataObj.user_id &&
                            item.is_success === 0 &&
                            dataObj.status === 0
                        " class="button" type="primary" @click="hireService(item)">雇佣TA</el-button>
                        <!-- <el-button class="button" type="primary" 
                            @click="openKefu(item.serviceinfo)">去沟通</el-button> -->
                        <el-button class="button" type="primary"
                            @click="goServiceStore(item.service_id)">进入店铺</el-button>
                        <el-button v-if="userInfo && item.serviceinfo.user_id == userInfo.id && dataObj.status == 0"
                            class="button" plain type="primary" @click="isEditShow = true">修改投标</el-button>
                    </div>
                </div>
            </div>
            <div v-if="joinList.length === 0" class="empty">
                <el-empty description="暂无投标"></el-empty>
            </div>
            <!-- 参与投标列表 end -->

            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/demanddetai_jylc_img.png?v=1"
                class="jylc_img" alt="">

            <div class="zysx">
                <div class="zysx_label">
                    <i class="el-icon-warning"></i>
                    注意事项
                </div>
                <div class="zysx_text">
                    <p>1、小竹企服作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益；</p>
                    <p>2、非平台线上交易的项目，出现任何后果均与小竹企服无关；无论卖家以何理由要求线下交易的，请联系管理举报。</p>
                    <p>3、雇主在验收时需核对好需求完成情况，一旦点击完成后。平台打款后将无法协助雇主追回佣金。</p>
                    <p>4、如产生纠纷，但请尽量保留如聊天记录这样的重要信息，以防产生纠纷时便于平台客服快速处理。</p>
                </div>
            </div>

        </div>


        <el-dialog title="确认支付" :visible.sync="payCodeShow" width="400px" center>
            <div class="pay_code">
                <vue-qr style="display: block;margin: 0 auto;" ref="qrCode" :text="payCode" color-dark="black"
                    :margin="0" width="240px" height="240px"></vue-qr>
                <div class="pay_text">投标请支付<span>1元</span></div>
                <div class="go_vip" @click="set_payVipShow({ show: true, index: 1 }); payCodeShow = false">
                    加入小竹会员可享不限次数查询
                    ></div>
                <div class="xieyi">
                    小竹企服服务协议
                    <img src="~/assets/images/service/biao.png" alt="">
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    getSimilarDemand,
    get_demand_id,
    addDemand,
    setCollect,
    addHire,
    shop_del,
    hire_service_new,
    pc_service_look_demand,
    edit_bid,
    getServiceInfo,
    pc_service_demand,
    hire_service_detail,
    pc_buy_vip
} from "@/assets/api/service";
import { getanalysedata2 } from "@/assets/api/indexApi";
import { mapState, mapActions, mapMutations } from "vuex";
import axios from "axios";
import CountDown from "@/components/countDown/countDown.vue";
import collectionS from "@/assets/images/regulations/collection_s.png";
import collection from "@/assets/images/regulations/collection.png";
import { goTopSmooth, getTime2 } from "@/assets/utils/utils";

export default {
    components: { CountDown },
    head() {
        return {
            title: "需求大厅-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服,需求大厅",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            payCodeShow: false,
            // https://h5.xzcs2022.com/juhe-pay/?combo_id=646&token=a94cd3da-2ce4-4c6e-a7d9-5ad786379920&money=1&type=6&order_sn=202506111636525447
            payCode: '',

            user_tel: '',

            dataObj: {}, //需求详情
            cateName: {}, //服务类目名称
            applicationShow: true,
            illustrate: "", //投标说明
            num: 0,
            isUpdataJoin: false, // 是否可以编辑投标

            fileList: [],
            demandImg: [], //需求附件

            imgUploadUrl: "",
            token: "",
            id: "",

            getTime2: getTime2,

            //倒计时组件
            endTime: null, //倒计时时间戳(秒)
            endText: null, // 活动名称
            timeTrue: false,
            titleColor: "#fa5151", //倒计时字体颜色

            similarList: [], //类似需求列表

            joinList: [], //参与投标列表

            partLoading: false, //确认提交缓存按钮,
            //partBtn: true，
            collectionS: collectionS,
            collection: collection,
            isCollect: "",

            isParticipateIn: false, // 是否参与了需求
            isEditShow: false, // 是否显示修改

            isWin: false, // 是否中标

            have_hire_status: '', // 是否有人已经雇佣中
            have_is_successs: '', // 是否有人已经中标

            placeOrderForm: {
                id: '',
                orderNo: '',
                price: '',
            }
        };
    },
    created() { },
    beforeDestroy() { },
    beforeMount() {
        this.$options.components["vue-qr"] = () => import("vue-qr");
    },
    mounted() {
        this.init();
        goTopSmooth();
        this.$router.afterEach((to, from) => {
            if (to.path === from.path) {
                this.$nextTick(() => {
                    location.reload();
                });
            }
        });
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        header() {
            return {
                token: this.userInfo && this.token ? this.token : "",
            };
        },
    },
    watch: {},
    methods: {
        ...mapActions("common", ["getUserInfo2"]),

        ...mapMutations("common", [
            "set_payVipShow",
        ]),

        init() {
            this.id = this.$route.query.id;
            this.token = localStorage.getItem("token");
            this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";
            this.getDemandList();
            // this.getSimilarList();
        },

        // 点击收藏
        async setCollection() {
            const res = await setCollect({
                id: this.id,
                type: 14,
            });
            if (res.code == 1) {
                this.isCollect == 0
                    ? (this.isCollect = 1)
                    : (this.isCollect = 0);
                if (this.isCollect == 1) {
                    this.$message({
                        message: "收藏成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: "取消收藏",
                        type: "warning",
                    });
                }
            }
        },

        //获取类似需求列表
        async getSimilarList() {
            const res = await getSimilarDemand({});
            if (res.code == 1) {
                this.similarList = res.data;
            }
        },

        changeDate(val) {
            return this.$moment(val * 1000).format("YYYY-MM-DD HH:mm:ss");
        },

        // 获取需求详情数据
        async getDemandList() {
            const res = await get_demand_id({
                demand_id: this.id,
            });
            if (res.code == 1) {
                this.timeTrue = true;
                this.isCollect = res.data.is_collect;
                this.dataObj = res.data.info;
                this.user_tel = res.data.user_tel;
                if (res.data.info.annex) {
                    this.demandImg = res.data.info.annex.split(",");
                } else {
                    this.demandImg = [];
                }

                this.cateName = res.data.info.cate;
                this.joinList = res.data.joinlist;
                this.endTime = res.data.info.end_time + "";
                this.endText = "招标结束";

                for (let item of res.data.joinlist) {
                    if (item.hire_status == 1)
                        this.have_hire_status = item.id
                    if (item.is_success == 1)
                        this.have_is_successs = item.id

                }

                // 判断是本用户否投标
                let that = this
                this.getUserInfo2().then((user) => {
                    if (user) {
                        if (user.service_info) {
                            for (let item of res.data.joinlist) {
                                if (item.service_id == user.service_info.id) {
                                    if (item.is_success == 1) {
                                        that.isWin = true
                                    }
                                    that.num = Number(item.price)
                                    that.illustrate = item.illustrate
                                    that.isUpdataJoin = true
                                }
                            }
                        }
                    }
                });



                getanalysedata2({
                    m_id: 9,
                    type: 1,
                    code: "PH1",
                    describe: "需求-" + this.cateName.third_cate_name,
                });
            }
        },

        // 上传成功钩子
        handleAvatarSuccess(res, file, fileList) {
            this.fileList.push(res.data.fullurl);
        },

        // 移除上传文件钩子
        handleRemove(file, fileList) {
            this.fileList.forEach((item, index) => {
                if (file.response.data.fullurl === item) {
                    this.fileList.splice(index, 1);
                }
            });
        },
        handleExceed(files, fileList) {
            this.$message.warning(" 图片上传数量不超过3张");
        },

        // 上传前检查
        beforeAvatarUpload(file) {
            const isType =
                file.type == "image/jpeg" ||
                file.type == "image/jpg" ||
                file.type == "image/png";
            const isLtMB = file.size / 1024 / 1024 < 5;

            if (!isType) {
                this.$message.error("上传图片只能是 JPG,JPEG,PNG 格式!");
            }
            if (!isLtMB) {
                this.$message.error("上传图片大小不能超过 5MB!");
            }
            return isType && isLtMB;
        },

        //报名验证
        async changeApply() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            const res = await pc_service_look_demand({
                combo_id: this.id
            })
            if (res.code == 1) {
                this.payCode = res.data
                this.payCodeShow = true;
                // 轮询开始
                setTimeout(() => {
                    this.updatgaDemandLook()
                }, 1500)
            }
        },

        async updatgaDemandLook() {
            if (!this.payCodeShow) {
                this.partLoading = false;
                this.applicationShow = false;
                return
            }
            const res = await get_demand_id({
                demand_id: this.id,
            });
            /** 旧解锁查看号码逻辑
             * if (res.code == 1 && res.data.user_tel) {
             * 
             * this.payCodeShow = false
             * this.user_tel = res.data.user_tel;
            **/
            if (res.code == 1) {
                let is = false
                for (let item of res.data.joinlist) {
                    if (item.serviceinfo.user_id == this.userInfo.id) {
                        is = true
                    }
                }
                if (is) {
                    this.$message.success("报名参与成功");
                    this.illustrate = "";
                    this.num = 0
                    this.applicationShow = false;
                    this.getDemandList();
                    this.partLoading = false;

                    this.payCodeShow = false
                    this.user_tel = res.data.user_tel;
                } else {
                    setTimeout(() => {
                        this.updatgaDemandLook()
                    }, 1500)
                }
            }

        },

        //报名参与需求
        async addPart() {
            if (this.userInfo.id == this.dataObj.user_id) {
                this.$message.warning("您不能报名参与自己的需求");
                return;
            }
            if (!this.userInfo.service_info) {
                this.$confirm('您当前不是服务商,请先申请服务商', '提示', {
                    confirmButtonText: '申请服务商',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.$router.push({
                        path: "/service/applyservice"
                    })
                }).catch(() => {

                });
                return;
            }
            if (this.num == 0) {
                this.$message.warning("报价不得等于0");
                return;
            }
            this.partLoading = true;
            let obj = {
                illustrate: this.illustrate,
                // pic: this.fileList.join(","),
                demand_id: this.id,
                price: this.num
            };
            const res = await addDemand(obj);
            if (res.code == 1) {
                if (this.user_tel == '')
                    this.pc_service_demand(res.data)
                else {
                    this.$message.success("报名参与成功");
                    this.illustrate = "";
                    this.num = 0
                    this.applicationShow = false;
                    this.getDemandList();
                    // this.getSimilarList();
                    this.partLoading = false;
                }

            } else {
                this.partLoading = false;
            }
        },

        // 获取支付二维码
        async pc_service_demand(combo_id) {
            const res = await pc_service_demand({
                combo_id: combo_id
            })
            if (res.code == 1) {
                this.payCode = res.data
                this.payCodeShow = true;
                // 轮询开始
                setTimeout(() => {
                    this.updatgaDemandLook()
                }, 1500)
            }
        },

        // 编辑需求
        async editDemand() {
            if (this.num == 0) {
                this.$message.warning("报价不得等于0");
                return;
            }
            const res = await edit_bid({
                demand_id: this.id,
                price: this.num,
                illustrate: this.illustrate,
            })
            if (res.code == 1) {
                this.joinList = []
                this.isEditShow = false
                this.getDemandList();
            }
        },

        // 点击雇佣服务商
        hireService(item) {
            let obj = {
                demand_id: this.id,
                service_id: item.service_id + '',
            };
            var _this = this;
            if (item.hire_status == 0 && this.have_hire_status) {
                this.$confirm("当前需求已有正在雇佣的服务商，请查看", "提示", {
                    confirmButtonText: "查看",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(function () {
                        console.log(1)
                        _this.$router.push({
                            path: "/user/mydemand"
                        })
                    })
                    .catch(function (err) {

                    });
                return
            }
            this.$confirm("是否雇佣该服务商？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(function () {
                    _this.hire_service_new(obj);
                })
                .catch(function (err) { });
        },

        async hire_service_new(obj) {
            let res = await hire_service_new(obj)
            if (res.code == 1) {
                this.$router.push({
                    path: "/service/placeorder?id=" + res.data
                })
                console.log(res)
                // this.placeOrderForm.id = res.data
                // res = await hire_service_detail({ id: res.data });
                // if (res.code == 1) {
                //     this.placeOrderForm.orderNo = res.data.order_sn
                //     this.placeOrderForm.price = Number(res.data.price)
                //     res = await pc_buy_vip({
                //         order_sn: this.placeOrderForm.orderNo,
                //         money: this.placeOrderForm.price,
                //         combo_id: this.placeOrderForm.id
                //     })
                //     if (res.code == 1) {
                //         this.payCode = res.data
                //         this.payCodeShow = true;
                //         // 启动轮询
                //         this.lunxunOrder()
                //     }
                // }
            }
        },

        async lunxunOrder() {
            if (!this.payCodeShow) {
                return
            }
            const res = await hire_service_detail({
                id: this.placeOrderForm.id,
            })
            if (res.code == 1 && res.data.status == 4) {
                this.$router.push({
                    path: "/service/placeorder?id=" + this.placeOrderForm.id
                })
            } else {
                setTimeout(() => {
                    this.lunxunOrder()
                }, 1500)
            }

        },

        //类似需求路由跳转
        goDemandDetail(item) {
            this.endTime = null;
            this.endText = null;
            this.$router.replace({
                path: "/service/demanddetail",
                query: {
                    id: item.id,
                },
            });
        },

        //前往服务商店铺
        goServiceStore(id) {
            this.$router.push({
                path: "/service/servicedetail",
                query: {
                    id: id,
                },
            });
        },

        openKefu(item) {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$alert(item.serviceinfo.tel, '联系电话', {
                confirmButtonText: '确定',
                callback: action => {

                }
            });
            // if (this.userInfo.id == item.user_id) return;
            // localStorage.setItem("to_zim_userid", item.user_id);
            // this.$router.push({
            //     path: "/service/servicechat",
            // });
        },
    },
};
</script>

<style lang="scss" scoped>
.demand-detail {
    position: relative;
    padding: 20px 0 30px;
    overflow: hidden;
}



.empty {
    background-color: #ffffff;
    margin-bottom: 16px;
}

.content {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    border-radius: 4px;
}

.demand-info {
    background-color: #ffffff;
    padding: 20px 24px;
    border-radius: 4px;
    position: relative;

    .title {
        font-size: 24px;
        font-weight: 6600;
        color: #333333;
        margin-bottom: 18px;
        width: 80%;

        .status0 {
            margin-left: 16px;
            display: inline-block;
            width: 80px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: #0ea715;
            border-radius: 2px;
            font-size: 14px;
            color: #ffffff;
            position: relative;
            top: -4px;
        }

        .status1 {
            margin-left: 16px;
            display: inline-block;
            width: 80px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: #e8e8e8;
            border-radius: 2px;
            font-size: 14px;
            color: #666666;
            position: relative;
            top: -4px;
        }
    }

    .grid {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .descriptions {
        color: #909090;
        font-size: 14px;
        line-height: 40px;

        span {
            padding-left: 3px;
            color: #060621;
        }
    }

    .describe-title {
        color: #909090;
        font-size: 14px;
        padding-top: 18px;
        padding-bottom: 19px;
    }

    .describe {
        min-height: 140px;
        font-weight: 400;
        font-size: 16px;
        color: #060621;
        line-height: 23px;
        background: #F7F8FA;
        border-radius: 10px;
        padding: 10px 15px;
    }

    .demand-img {
        display: flex;
        flex-wrap: wrap;
        margin-top: 16px;

        .img {
            display: block;
            margin-right: 17px;
            margin-top: 17px;
            width: 126px;
            height: 145px;
            object-fit: cover;
            cursor: pointer;
        }
    }

    .no_look_phone {
        height: 68px;
        width: auto;
        display: block;
        margin: 20px auto 0;
    }

    .look_phone {
        font-weight: 500;
        font-size: 32px;
        color: #1B8DFF;
        padding: 26px 0 9px;
        text-align: center;

        span {
            padding-right: 19px;
        }
    }

    .tips {
        font-size: 14px;
        color: #525355;
        padding-top: 31px;
        text-align: center;
    }

    .moeny {
        display: flex;
        justify-content: flex-start;
        //border: 1px solid #FF6900;
        position: absolute;
        right: 31px;
        top: 38px;

        span {
            font-size: 26px;
            font-weight: 700;
            color: #ff6900;
            height: 38px;
            line-height: 38px;
            text-align: center;
            display: block;
        }

        div {
            font-size: 18px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            color: #ffffff;
            background: #ff6900;
            width: 88px;
            height: 38px;
            line-height: 38px;
            text-align: center;
        }
    }

    .collect {
        position: absolute;
        right: 52px;
        top: 118px;
        color: #999;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
        }

        span {
            margin-top: 8px;
        }
    }
}

.cytb {
    margin-top: 16px;
    font-size: 20px;
    color: #333333;
    line-height: 74px;
    height: 74px;
    background-color: #ffffff;
    padding-left: 36px;
    border-bottom: 1px solid #f6f6f6;

    span {
        color: #fa5151;
    }
}

.cytb-list {
    padding: 15px 20px;
    background-color: #ffffff;

}

.cytb-item {
    margin-bottom: 20px;
    padding: 22px 20px 26px;
    background-color: #F7F8FA;
    border-radius: 4px;
    position: relative;

    .winTheBidding {
        width: auto;
        height: 88px;
        position: absolute;
        right: 113px;
        top: -39px;
    }

    .cytb-item-text {
        padding-top: 12px;
        font-weight: 400;
        font-size: 18px;
        color: #525355;
        line-height: 32px;

        p {
            display: flex;
            white-space: pre;
        }

        span {
            width: 1029px;
            word-wrap: break-word;
            /* 允许长单词或URL在任意字符处换行（兼容旧浏览器） */
            overflow-wrap: break-word;
            /* 现代标准属性，效果同 word-wrap */
            white-space: normal;
            /* 默认值，允许换行 */
            display: block;
            color: #060621;
        }
    }

    .cytb-item-images {
        display: flex;
        flex-wrap: wrap;
        padding-top: 16px;
        padding-left: 42px;

        .img {
            display: block;
            margin-right: 17px;
            margin-top: 17px;
            width: 126px;
            height: 145px;
            object-fit: cover;
            cursor: pointer;
        }
    }

    .time {
        margin-top: 100px;
        // padding-top: 120px;
        line-height: 60px;
        height: 60px;
        border-top: 1px solid #f3f3f3;
        font-size: 14px;
        color: #9e9e9e;
        padding-left: 42px;
    }

    .button-group {
        position: absolute;
        top: 12px;
        right: 20px;
        display: flex;
        height: 93px;
        flex-direction: column;
        justify-content: flex-end;

        .button {
            display: block;
            width: 90px;
            height: 39px;
            font-size: 14px;
            margin: 7px 0 0;

            &:active {
                opacity: 0.8;
            }
        }
    }
}

.cytb-service-info {
    display: flex;
    padding-bottom: 22px;
    border-bottom: 1px dashed #1B8DFF;

    img {
        width: 76px;
        height: 76px;
        border-radius: 76px;
    }

    .name {
        font-size: 18px;
        font-weight: 600;
        color: #060621;
        padding: 3px 24px;

        i {
            padding-left: 10px;
            cursor: pointer;
            color: #1B8DFF;

            &:hover {
                opacity: 0.85;
            }
        }

        .tags {
            display: flex;
            padding-top: 14px;
        }

        .tag {
            font-weight: 400;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            color: #ffffff;
            padding: 0 10px;
            margin-right: 7px;
            border-radius: 3px;
        }
    }
}



.application {
    padding-top: 70px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 25px;
    padding: 20px 24px;

    .input_moent {
        font-weight: 600;
        font-size: 18px;
        color: #060621;
        display: flex;
        align-items: center;

        span {
            font-weight: 500;
            font-size: 14px;
            color: #060621;
            padding-left: 9px;
        }

        &::v-deep .el-input__inner,
        .el-input-number {
            width: 96px;
            height: 36px;
            line-height: 25px;
            text-align: left;
            font-weight: 500;
            font-size: 24px;
            color: #FF6900;
        }

        &::v-deep .el-input__inner {
            padding-left: 5px;
            padding-right: 5px;
            margin-left: 10px;
        }
    }

    .label {
        font-weight: 600;
        font-size: 18px;
        color: #060621;
        margin-bottom: 16px;
    }

    .application-title {
        display: flex;
        font-size: 18px;
        color: #333333;
        display: flex;
        align-items: center;

        div {
            width: 4px;
            height: 20px;
            background: #ec2828;
            margin-right: 10px;
        }
    }

    .textarea {
        padding-top: 19px;
    }

    .upload-images {
        padding-top: 22px;

        .upload-images-text {
            font-size: 12px;
            padding-top: 11px;
            color: #999999;
        }
    }

    .submit {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 38px;

        .tips2 {
            font-weight: 400;
            font-size: 14px;
            color: #060621;

            span {
                color: #FA5151;
            }
        }
    }
}

.status_img {
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #ffffff;
    margin-top: 20px;

    img {
        width: 100%;
        height: auto;
    }
}

.jylc_img {
    width: 1200px;
    height: auto;
    margin: 20px auto 0;
    display: block;
}

.zysx {
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #ffffff;
    margin-top: 20px;

    .zysx_label {
        font-weight: 600;
        font-size: 20px;
        color: #020C17;
        border-bottom: 1px solid #F0F0F0;
        padding-bottom: 20px;

        i {
            color: #FA5151;
            padding-right: 7px;
            font-size: 25px;
            position: relative;
            top: 1px;
        }
    }

    .zysx_text {
        padding-top: 12px;
        font-weight: 400;
        font-size: 16px;
        color: #020C17;
        line-height: 32px;
    }
}

.pay_code {
    .pay_text {
        font-weight: 400;
        font-size: 24px;
        color: #060621;
        padding-top: 17px;
        text-align: center;

        span {
            color: #FA5151;
        }
    }

    .go_vip {
        width: 343px;
        height: 49px;
        line-height: 49px;
        text-align: center;
        background: rgba(27, 141, 255, 0.1);
        border-radius: 5px;
        border: 1px solid #1B8DFF;
        font-weight: 400;
        font-size: 18px;
        color: #1B8DFF;
        margin: 26px auto 0;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }
    }

    .xieyi {
        font-weight: 400;
        font-size: 18px;
        color: #060621;
        padding-top: 13px;
        line-height: 26px;
        text-align: center;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }

        img {
            position: relative;
            width: 10px;
            height: 10px;
            top: -5px;
        }
    }
}


::v-deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 80px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;

    img {
        object-fit: cover;
    }
}
</style>